<!-- 用户管理 -->
<template>
    <div>
        <div class="ls-User__centent ls-card m-t-16">
            <div class="pane-header table-toolbar">
                <!-- <el-button type="text" size="small" slot="trigger" @click="refresh">刷新 </el-button> -->
                <!-- <el-button type="primary" size="small" slot="trigger" @click="openEpisode">添加短剧 </el-button> -->
                <el-button type="primary" size="small" slot="trigger" @click="openDrawer">添加短剧 </el-button>
            </div>
            <MyTable ref="my_table" :columns="columns" :list-api="tableListApi">
                <template v-slot:image="{ row }">
                    <div class="flex">
                        <el-image :src="row.image" style="width: 34px; height: 34px"></el-image>
                    </div>
                </template>
            </MyTable>
            <MyDrawer v-if="myDrawerVisible" title="添加短剧" :visible.sync="myDrawerVisible" @submit="submit">
                <Videoaddlist lazy ref="my_video_detail" c-type="dialog" v-model="formInfo" :mode="mode"
                    :edit-info="formInfo" :visible.sync="myDrawerVisible" @success="detailsSuccessHandler">
                </Videoaddlist>
            </MyDrawer>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import { Mutation } from 'vuex-class'
import { visionlist, delvisilist } from '@/api/visionapi/index'
import LsDialog from '@/components/ls-dialog.vue'
import { PageMode } from '@/utils/type'
import MyTable from '@/components/MyTable/MyTableIndex.vue'
import MyDrawer from '@/components/MyDrawer/MyDrawerIndex.vue'
import Videoaddlist from './detail.vue'
import { IVideoEditForm } from './video.interface'
interface IFromInfo {
    key: string
    value?: any
}
@Component({
    components: {
        LsDialog,
        MyTable,
        MyDrawer,
        Videoaddlist
    }
})
export default class VideoList extends Vue {
    @Ref() readonly my_video_detail!: Videoaddlist
    @Ref() readonly my_table!: MyTable
    @Mutation('details/setFromInfoItem') setFromInfoItem!: (params: IFromInfo) => void
    selectIds: any[] = []
    listdata = []
    tableListApi: any = visionlist
    columns = [
        {
            prop: 'id',
            label: 'ID',
            width: 50,
        },
        {
            prop: 'image',
            label: '封面',
            width: 100,
            scopedSlots: { customRender: 'image' }
        },
        {
            prop: 'title',
            label: '短剧标题',
        },
        {
            prop: 'category_name',
            label: '分类',
            width: 100,
        },
        {
            prop: 'area_name',
            label: '区域',
            width: 100,
        },
        {
            prop: 'year',
            label: '年份',
            width: 100,
        },

        {
            prop: 'price',
            label: '普通会员价',
            width: 100
        },
        {
            prop: 'vip_price',
            label: 'vip会员价',
            width: 100
        },
        {
            prop: 'is_distribution',
            label: '是否分销',
            width: 80,
            formatData: function (val: string | number) {
                return val == 1 ? '是' : '否'
            }
        },
        {
            prop: 'number',
            label: '集数',
            width: 80
        },
        {
            prop: 'operation',
            label: '操作',
            width: 180,
            operation: [
                { name: '编辑', type: 'text', clickFun: this.saveInfo },
                { name: '添加集数', type: 'text', clickFun: this.openEpisode },
                { name: '删除', type: 'danger', clickFun: this.onUserLevelDel }
            ]
        }
    ]
    mode: string = PageMode.ADD
    myDrawerVisible: Boolean = false
    formInfo: IVideoEditForm | null = null
    created() {

    }
    get disabledBtn() {
        return !this.selectIds.length
    }
    refresh(callback: Function | any) {
        if (callback && typeof callback === 'function') {
            callback()
            return
        }
        this.getJsonData()
    }
    setEditInfo() { }
    openDrawer() {
        this.mode = PageMode.ADD
        this.myDrawerVisible = true
    }
    detailsSuccessHandler() {
        this.mode = PageMode.ADD
        this.myDrawerVisible = false
        // @ts-ignore
        if (this.my_table && this.my_table.refresh) {
            // @ts-ignore
            this.my_table.refresh()
        }

    }

    // 添加视频
    jumpVideoDetail() {
        this.$router.push({
            name: 'videoDetail',
            query: {
                mode: PageMode.ADD
            }
        })
    }
    saveInfo(row: any) {
        this.formInfo = row
        this.mode = PageMode.EDIT
        this.myDrawerVisible = true
        return
        //
        this.setFromInfoItem({
            key: `videoItemInfo${row.id}`,
            value: row
        })
    }
    // 删除视频
    onUserLevelDel(row: any, index: Number, callback: Function) {
        const id = row.id
        this.$confirm('是否确认删除该短剧?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                delvisilist({
                    ids: [id]
                })
                    .then(() => {
                        this.$message.success('删除成功!')
                        callback()
                    })
                    .catch(() => {
                        this.$message.success('删除失败!')
                    })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
    }
    // 视频列表
    getJsonData() {
        visionlist({
            page_size: 20,
            page_no: 1
        }).then(res => {
            this.listdata = res
        })
    }
    submit() {
        if (this.my_video_detail && this.my_video_detail.onSubmit) {
            this.my_video_detail.onSubmit()
        }
    }
    openEpisode(row: IVideoEditForm) {
        // return
        this.$router.push({
            name: 'VideoEpisodeList',
            params: {
                id: String(row.id),
                distribution_level_ids: JSON.stringify(row.video_distribution_level)
            },
            query: {
                distribution_level_ids: JSON.stringify(row.video_distribution_level)
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.table-toolbar {
    margin-bottom: 20px;
}

.user-management {
    .ls-user__top {
        padding: 16px 24px;
    }
}
</style>
